<div id="finicial_books_config" class="clearfix">
	<div class="absolute fin_menu border">
		<div class="color-gray line-height-45" style="background:rgba(239,239,239,1);">账套名称</div>
		<div class="absolute" style="top: 45px;bottom: 45px;width: 100%;">
			<vue-scroll :ops="ops" style="height: 100%;">
				<ul>
					<li class="line-height-45 border-b cursor relative" @click="selectAccounting(item)"
						:class="{active: accountingSelectId == item.id}" v-for="(item, index) in accountingArr">
						{{ item.name }}
						<span class="icon-Gm-delete pull-right line-height-45 pr-12 hide" @click.stop.prevent="del(item)"></span>
					</li>
				</ul>
			</vue-scroll>
		</div>

		<button v-if="!addFlag" @click="add" class="n-btn-primary absolute"
			style="min-width: 100%;bottom: 0;left:0;height: 45px;line-height: 45px;">新增</button>
	</div>

	<div class="fin_add pull-right mt-10 border">
		<div class="color-gray line-height-45 pl-12 clearfix" style="background:rgba(239,239,239,1);">
			<span>账套设置</span>
		</div>

		<div class="mt-15 plr-12 pb-20">
			<div v-if="projectSelect.length || addFlag">
				<div class="dy-flex">
					<div class="dy-fx-2 line-height-34">账套名称：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="finName" v-if="addFlag">
						<span v-if="!addFlag">{{ detail.name || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="projectSelect.length">
					<div class="dy-fx-2 line-height-34">包含项目：</div>
					<div class="dy-fx-10 clearfix">
						<div class="pull-left mr-10 border n-btn-primary ellipsis-1 cursor mb-10" @click="delProject(item, index)"
							:style="{width: 640/4-16 + 'px',lineHeight:'34px'}" v-for="(item, index) in projectSelect">
							{{ item.projectName }}</div>
					</div>
				</div>
				<div class="dy-flex mt-10">
					<div class="dy-fx-2 line-height-34">是否推送：</div>
					<div class="dy-fx-10 line-height-34">
						<span v-if="!addFlag">{{ pushFlag + '' == 'Y'?'是':(pushFlag + '' == 'N'?'否':'--')}}</span>
						<hl-select :data="options" v-model="pushFlag" width="180" dropdownHeight="110" v-else></hl-select>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">财务软件版本：</div>
					<div class="dy-fx-10 line-height-34">
						<span>{{ financeSoftwareVersion + ''}}</span>
						<!-- <span v-if="!addFlag">{{ financeSoftwareVersion + ''}}</span> -->
						<!-- <hl-select :data="options" v-model="selectedOption" width="180" dropdownHeight="110" v-else></hl-select> -->
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">推送地址：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="pushAddress" v-if="addFlag">
						<span v-if="!addFlag">{{ pushAddress || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">项目公司编码：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="companyCode" v-if="addFlag">
						<span v-if="!addFlag">{{ companyCode || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">项目公司名称：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="companyName" v-if="addFlag">
						<span v-if="!addFlag">{{ companyName || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">登录用户名：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="pushUserName" v-if="addFlag">
						<span v-if="!addFlag">{{ pushUserName || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">登录密码：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="password" class="form-control" style="width: 180px;" v-model="pushPassword" v-if="addFlag">
						<span v-if="!addFlag">******</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">数据中心：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="dataCenter" v-if="addFlag">
						<span v-if="!addFlag">{{ dataCenter || '--' }}</span>
					</div>
				</div>
				<div class="dy-flex mt-10" v-if="pushFlag + '' == 'Y'">
					<div class="dy-fx-2 line-height-34">制单人：</div>
					<div class="dy-fx-10 line-height-34">
						<input type="text" class="form-control" style="width: 180px;" v-model="documentingUserName" v-if="addFlag">
						<span v-if="!addFlag">{{ documentingUserName || '--' }}</span>
					</div>
				</div>
			</div>

			<div v-if="addFlag">
				<div class="fin_config">
					<div class="line-height-34">可配置项目：</div>
					<div class="dy-flex bg-f7f7f7 fin_config_select" style="padding: 10px 10px 0;">
						<div class="project_li ellipsis-1 cursor" :class="{active: projectSelectIds.indexOf(item.projectId) > -1}"
							@click="selectProject(item, index)" :style="{width: 740/4-20 + 'px'}" v-for="(item, index) in projectArr">
							{{ item.projectName }}</div>
					</div>
				</div>
			</div>

			<button class="btn s-btn-default mt-15 mr-10" @click="submitSave" v-if="addFlag">保存</button>
			<button class="btn s-btn-default mt-15" @click="addFlag = false" v-if="addFlag">返回</button>
			<button class="btn s-btn-default mt-15" @click="edit" v-if="!addFlag && projectSelect.length">编辑</button>
		</div>
	</div>
</div>

<style type="text/css">
	.fin_menu {
		width: 230px;
		left: 0;
		top: 66px;
		bottom: 0;
		border-left: 0;
		text-indent: 15px;
		border-top-right-radius: 4px;
	}

	.fin_menu li:hover {
		background: rgba(247, 247, 247, 1);
	}

	.fin_menu li.active {
		background-color: #5e67a5;
		color: #fff;
	}

	.fin_menu li:hover span {
		display: block;
	}

	.fin_add {
		width: 785px;
		border-top-left-radius: 4px;
	}

	.fin_config_select {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.project_li {
		background: #fff;
		line-height: 34px;
		text-align: center;
		color: #565E99;
		margin: 0 6px 10px;
		border: 1px solid #565E99;
	}

	.project_li.active {
		background: #eee;
	}
</style>

<script src="modules/system_config/scripts/finicial_books_config.js" charset="utf-8"></script>